<template>
    <div class="login" :style="'background-image:url(' + Background + ');'">
        <el-form ref="loginForm" label-position="left" label-width="0px" class="login-form">
            <h3 class="title">
                治疗管理系统
            </h3>
            <div class="auto-login-text">{{ text }}</div>
            <el-form-item v-if="showBtn" style="width:100%;">
                <el-button size="medium" type="primary" style="width:100%;" @click.native.prevent="pwdLogin">
                    <span>Password Login</span>
                </el-button>
            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div v-if="$store.state.settings.showFooter" id="el-login-footer">
            <span v-html="$store.state.settings.footerTxt" />
            <span> ⋅ </span>
            <a href="http://www.beian.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
        </div>
    </div>
</template>

<script>
import Background from '@/assets/images/background.jpg'
import { getQueryObject } from '@/utils/index'
export default {
    name: 'AutoLogin',
    data() {
        return {
            Background: Background,
            showBtn: false,
            text: 'Logging in ...',
            up: '',
            redirect: undefined
        }
    },
    created() {
        this.getUrlQuery()
    },
    methods: {
        getUrlQuery() {
            this.up = getQueryObject().up || ''
            this.redirect = getQueryObject().redirect || ''
            if (this.up && this.redirect) {
                this.handleLogin()
            } else {
                this.text = 'Login parameter error！'
                this.showBtn = true
            }
        },
        handleLogin() {
            this.$store.dispatch('AutoLogin', {
                up: this.up
            }).then(() => {
                this.text = 'Login successful, will jump to page.'
                this.$message.success('Login successful, will jump to page.')
                const that = this
                setTimeout(function () {
                    that.$router.push({ path: that.redirect || '/' })
                }, 1000)
            }).catch(() => {
                this.text = 'Login failed'
                this.showBtn = true
            })
        },
        pwdLogin() {
            this.$router.push({ path: '/login?redirect=' + this.redirect })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-size: cover;
}

.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 385px;
    padding: 25px 25px 5px 25px;

    .auto-login-text {
        padding: 30px 0;
        text-align: center;
    }
}
</style>
